<template>
  <div class="msite">
    <!-- 加载框 -->
    <van-loading class="loading" color="#1989fa" size="1rem" v-show="loading" />
    <!-- 导航栏 -->
    <van-nav-bar
      class="bg"
      :title="newAddress.name"
      :right-text="isLogin?'退出':'登录|注册'"
      @click-right="onClickRight"
    >
      <van-icon name="search" slot="left" @click="toSearchPath" />
    </van-nav-bar>
    <!-- 轮播 -->
    <van-swipe class="my-swipe border-bottom" indicator-color="#3190E8" show-indicators>
      <van-swipe-item v-for="(item,i) of foodType" :key="i">
        <van-grid :border="false" icon-size="1.2rem" square>
          <van-grid-item
            v-for="value in item"
            :key="value.id"
            :icon="'https://fuss10.elemecdn.com'+value.image_url"
            :text="value.title"
            :to="{path:'/food',query:{geohash:geohash,title:value.title,restaurant_category_id:value.id}}"
          />
        </van-grid>
      </van-swipe-item>
    </van-swipe>
    <!-- 商品列表 -->
    <shop-list :shopList="shopList"></shop-list>
  </div>
</template>

<script>
import shopList from "@/components/common/shoplist.vue"; //引入商品列表组件
import { mapState } from "vuex";
export default {
  name: "msite",
  data() {
    return {
      loading: true, //加载框
      newAddress: {}, //当前选中的地址数据
      foodType: [], //食品分类数组
      shopList: [] //食品列表数据
    };
  },
  components: {
    shopList
  },
  computed: {
    ...mapState(["geohash"]),
    ...mapState(["isLogin"])
  },
  methods: {
    async getPosition() {
      //获取详细定位
      const { data: res } = await this.$axios.get(
        `v2/pois/${this.$route.query.geohash}`
      );
      this.newAddress = res;
      // shopping/restaurants?latitude=31.22967&longitude=121.4762
      const { data: result } = await this.$axios.get(
        `shopping/restaurants?latitude=${res.latitude}&longitude=${res.longitude}`
      );
      this.shopList = result;
    },
    onClickRight() {
      this.$router.push("/login");
    },
    toSearchPath() {
      //跳转到搜索页
      this.$router.push(`/search/${this.geohash}`);
    },
    async getFoodType() {
      //获取食品分类列表
      const { data: res } = await this.$axios.get("v2/index_entry");
      const result = [];
      for (var i = 0; i < res.length; i += 8) {
        //数组分割，每八个一组
        result.push(res.slice(i, i + 8));
      }
      this.foodType = result;
      this.loading = false;
    }
  },
  created() {
    this.getPosition();
    this.getFoodType();
  }
};
</script>

<style lang="stylus" scoped>
@import '../../assets/css/common.styl';

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.msite {
  padding-bottom: 50px;
}

.bg {
  background-color: $bg-color;
}

.van-nav-bar__text, .van-nav-bar__text, .van-nav-bar__title {
  color: #fff;
}

.van-nav-bar .van-icon {
  color: #fff;
  font-size: 0.6rem;
}

.van-nav-bar__title {
  font-weight: 700;
}
</style>